import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View, TextInput, Button, Image, TouchableOpacity} from 'react-native'
import ViewUtil from '../../../util/ViewUtil.js'
import MinaIcon from '../../../components/MinaIcon.js'
import NavigationBar from '../../../components/NavigationBar.js'
import NavigationUtil from '../../../navigator/NavigationUtil.js'

type Props = {};
export default class MyInfo extends Component<Props> {
  onBackPress() {
    NavigationUtil.goBack(this.props.navigation);
  }
  // 状态栏和头部
  renderNavigationBar(){
    let statusBar = {
      barStyle: 'light-content',
      backgroundColor: '#3E73FF',
    };
    let leftButton = ViewUtil.getLeftBackButton(() => this.onBackPress(), '#898989');
    let navigationBar = <NavigationBar
      title={'个人信息'}
      statusBar={statusBar}
      leftButton={leftButton}
      style={{backgroundColor: '#fff'}}
    />;
    return navigationBar;
  }
  renderMyInfo(){
    let MyInfo = {
      img: '',
      phone: '',
      nickName: '',
      name: '',
      date: '',
      email: '',
    }
  }
  render() {
    return (
      <View style={MinaStyle.minaContainer}>
        {this.renderNavigationBar()}
        <View style={styles.myInfo}>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>头像</Text>
              <View style={styles.myInfoRight}>
                <Image
                  style={styles.myInfoImg}
                  source={require('../../../assets/imgs/shop.jpg')}
                />
                <MinaIcon
                  name={'Ionicons|ios-arrow-forward' }
                  size={16}
                  style={{
                    alignSelf: 'center',
                    color: '#ccc',
                    marginLeft: 8,
                  }}
                />
              </View>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>账号</Text>
              <Text style={styles.myCellRightText}>15371143023</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>昵称</Text>
              <Text style={styles.myCellRightText}>廖丹妮</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>称呼</Text>
              <Text style={styles.myCellRightText}>爸爸</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>出生日期</Text>
              <View style={styles.myInfoRight}>
                <Text style={styles.myCellRightText}>1987-11-13</Text>
                <MinaIcon
                    name={'Ionicons|ios-arrow-forward' }
                    size={16}
                    style={{
                      alignSelf: 'center',
                      color: '#ccc',
                      marginLeft: 8,
                    }}
                />
              </View>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={styles.myInfoCell}>
              <Text style={styles.myCellLeftText}>邮箱</Text>
              <Text style={styles.myCellRightText}>zhangsan@minakevin.com</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  myInfo: {
    backgroundColor: '#fff',
    borderTopWidth: 0.5,
    borderTopColor: '#F4F4F4',
  },
  myInfoCell: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 0.5,
    borderBottomColor: '#F4F4F4',
    marginLeft: 15,
    marginRight: 15,
    height: 52,
  },
  myInfoImg: {
    width: 30,
    height: 30,
    borderRadius: 30,
  },
  myInfoRight: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  myCellLeftText: {
    fontSize: 15,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    color: '#282828'
  },
  myCellRightText: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    color: '#898989'
  },
});
